<template>
    <div class="flex gap-2">
        <el-tag :type="tagType" effect="dark">{{ statusText }}</el-tag>
    </div>
</template>

<script lang="ts">
import { ref, computed } from 'vue'

export default {
    props: {
        status: {
            // 状态: pending, ongoing, finished
            type: String,
            default: 'pending'
        }
    },
    setup(props) {
        const statusText = computed(() => {
            switch (props.status) {
                case 'pending':
                    return '未开始'
                case 'ongoing':
                    return '进行中'
                case 'finished':
                    return '已完成'
                case 'stopped-finished':
                    return '已截止-完成'
                case 'stopped-unfinished':
                    return '已截止-未完成'
                default:
                    return '未知状态'
            }
        })

        const tagType = computed(() => {
            switch (props.status) {
                case 'pending':
                    return 'info'
                case 'ongoing':
                    return 'success'
                case 'finished':
                    return 'success'
                case 'stopped-finished':
                    return 'success'
                case 'stopped-unfinished':
                    return 'warning'


                default:
                    return ''
            }
        })

        return { statusText, tagType }
    }
}
</script>

<style scoped></style>